<?php get_header(); ?>

<script>
  var d_filter = '.gear, .lamp, .lainnya, .mesin, .roller, .rubber, .toner, .track';
  $(document).ready(function(){
    var $handler = $('.product-container');
    
    $handler.imagesLoaded(function(){
      $handler.isotope({
        itemSelector: '.product-box',
        filter: d_filter,
        animationEngine : 'jquery'
      });
      
      $('.filter li').click(function(){
        if($(this).attr('id') != 'track'){
          if($(this).index() == 0){
            d_filter = '.gear, .lamp, .lainnya, .mesin, .roller, .rubber, .toner, .track';
          }else{
            d_filter = '.'+$(this).attr('id');
          }
          // console.log(d_filter);
          $handler.isotope({ filter: d_filter });
          
          $('.filter li').removeClass('active');
          $(this).addClass('active');
        }
      });
      
      $('#track').click(function(){
        window.location = '<?php bloginfo('url') ?>/category/produk/track';
      });
    });
  });
</script>

<div class="products">

  <ul class="filter">
    <li class="active">Semua</li>
		<li id="mesin">Mesin</li>
		<li id="toner">Toner</li>
		<li id="track">Track</li>
		<li id="gear">Gear</li>
		<li id="lamp">Lamp</li>
		<li id="roller">Roller</li>
		<li id="rubber">Rubber</li>
		<li id="lainnya">Lainnya</li>
  <?php
    // $args = array(
      // 'parent' => 1,
      // 'hide_empty' => 0
    // );
    // $categories = get_categories($args);
    
    // foreach($categories as $category){
  ?>
    <!--<li id="<?php echo $category->slug ?>"><?php echo $category->name; ?></li>-->
  <?php //} ?>
  </ul>

  <div class="product-container">
    <?php
      $argsc = array(
        'parent' => 1,
        'hide_empty' => 0
      );
      $categories = get_categories($argsc);
      
      foreach($categories as $category){
      
      $args = array(
        'numberposts' => -1,
        'category'     => $category->cat_ID,
      );
      $posts = get_posts($args);
      foreach($posts as $post){
      $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
    ?>
    <a href="<?php echo get_permalink($post->ID); ?>">
    <div class="product-box vshadow3 <?php echo $category->category_nicename ?>">
      <?php if(get_field('best_seller', $post->ID)){ ?>
        <div class="tag-best">Best Seller<div class="bar"></div></div>
      <?php } ?>
      
      <div class="product-pic" style="background: url(<?php echo $feat_image; ?>) no-repeat; background-position: center center; background-size: 190px auto;">
      </div>
      <div class="product-info">
        <h3><?php echo substr($post->post_title, 0, 16); ?></h3>
        <p><?php the_field('product_code', $post->ID); ?></p>
      </div>
      <hr />
    </div>
    </a>
    <?php }} ?>
  </div>

  <div class="clear"></div>
</div>

<?php get_footer(); ?>